<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
    {{ $t('navigateBar.hotspot') }}
    {{ $t('navigateBar.experience') }}
    {{ $t('navigateBar.focus') }}
    {{ $t('navigateBar.recommend') }}
  </div>
    <v-md-editor v-model="text" height="400px"></v-md-editor>
    <el-button>Default</el-button>
    <div>
          <button @click="changeLocale('zh')">切换为中文</button>
          <button @click="changeLocale('en')">切换为英文</button>
      </div>

    </div>
    <button @click="getList">111111111111</button>
    <div id="main"></div>
</template>

<script setup lang="ts">
  import {ref} from 'vue'
  import { useI18n } from "vue-i18n";
  import {getTaskList} from '../alova/service'
  let text=ref('')
 const { locale } = useI18n();
 // 切换语言
  const changeLocale = (lang:string) => {
    locale.value = lang;
    sessionStorage.setItem('locale', lang); // 存储语言偏好
  };
  async function getList(){
    const data = await getTaskList();
    console.log(data);
  }

 
//  import * as echarts from 'echarts';

// // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// // 绘制图表
// myChart.setOption({
//   title: {
//     text: 'ECharts 入门示例'
//   },
//   tooltip: {},
//   xAxis: {
//     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
//   },
//   yAxis: {},
//   series: [
//     {
//       name: '销量',
//       type: 'bar',
//       data: [5, 20, 36, 10, 10, 20]
//     }
//   ]
// });

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

</style>
